<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="10">
        <div class="filter-container dict-data">
          <!-- <el-select
            v-model="listQuery.domainId"
            placeholder="请选择系统域"
            class="filter-item"
            style="width: 150px;"
            @change="domainSelectChange"
          >
            <el-option
              v-for="item in domainList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select> -->
          <el-input
            v-model="listQuery.keyword"
            clearable
            style="width: 200px;"
            class="filter-item"
            placeholder="关键字"
            @keyup.enter.native="handleFilter"
            @input="handleFilter"
          />
          <!-- <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            查询
          </el-button> -->
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-edit"
            @click="handleCreate"
          >
            新增
          </el-button>
          <el-button class="filter-item" type="primary" @click="intiDictCache">
            初始化缓存
          </el-button>
        </div>
        <el-table
          :data="tableData"
          border
          fit
          stripe
          @row-click="rowClickHandle"
          :height="tableHeight"
        >
          <el-table-column prop="dictName" label="字典名称" width="150" />
          <el-table-column prop="dictCode" label="字典编码" width="150" />
          <el-table-column
            prop="sort"
            label="排序值"
            align="center"
            width="100"
          />
          <el-table-column prop="remark" label="备注" />
          <el-table-column
            fixed="right"
            align="center"
            header-align="center"
            label="操作"
            width="100"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="14">
        <div class="filter-container dict-data">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-edit"
            @click="slaveHandleCreate"
          >
            新增
          </el-button>
        </div>
        <el-table
          :data="slaveTableData"
          border
          fit
          stripe
          :height="tableHeight"
        >
          <el-table-column prop="dataName" label="字典项名称" width="150" />
          <el-table-column prop="dataValue" label="字典项值" width="150" />
          <el-table-column
            prop="sort"
            label="排序值"
            align="center"
            width="100"
          />
          <el-table-column
            prop="status"
            label="状态"
            align="center"
            width="100"
          />
          <el-table-column prop="remark" label="备注" />
          <el-table-column
            fixed="right"
            align="center"
            header-align="center"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="slaveHandleEdit(scope.$index, scope.row)"
              >
                编辑
              </el-button>
              <popover-confirm
                text="删除"
                @click="slaveHandleDelete(scope.row)"
              >
                确定删除吗?
              </popover-confirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :modal="false"
      :close-on-click-modal="false"
      :title="postForm.dictId ? '修改' : '增加'"
      width="40%"
      class="mini-el-dialog"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="postForm"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="所属系统域" prop="domainId">
          <el-select v-model="postForm.domainId" placeholder="请选择系统域">
            <el-option
              v-for="item in domainList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="postForm.dictName" />
        </el-form-item>
        <el-form-item label="字典编码" prop="dictCode">
          <el-input v-model="postForm.dictCode" />
        </el-form-item>
        <el-form-item label="排序值" prop="sort">
          <el-input-number
            v-model="postForm.sort"
            :step="1"
            :min="1"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="postForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="slaveDialogFormVisible"
      :modal="false"
      :close-on-click-modal="false"
      :title="slavePostForm.dataId ? '修改' : '增加'"
      width="40%"
      class="mini-el-dialog"
    >
      <el-form
        ref="slaveForm"
        :rules="slaveRules"
        :model="slavePostForm"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="所属系统域" prop="domainId">
          <el-select
            v-model="slavePostForm.domainId"
            placeholder="请选择系统域"
          >
            <el-option
              v-for="item in domainList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字典项" prop="dataName">
          <el-input v-model="slavePostForm.dataName" />
        </el-form-item>
        <el-form-item label="字典值" prop="dataValue">
          <el-input v-model="slavePostForm.dataValue" />
        </el-form-item>
        <el-form-item label="排序值" prop="sort">
          <el-input-number
            v-model="slavePostForm.sort"
            :step="1"
            :min="1"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="slavePostForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="slavePostForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="slaveDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="slaveSubmitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopoverConfirm from './components/PopoverConfirm'
import dictTypeAPI from './api/dictTypeAPI'
import dictDataAPI from './api/dictDataAPI'

export default {
  name: 'SysDictData',
  components: { PopoverConfirm },
  data () {
    return {
      domainList: [
        {
          value: '1',
          label: '一码游标准版'
        }
      ],
      // 数据库写死字典domainId为1，不能取变量中的domianId
      listQuery: {
        domainId: '1',
        keyword: undefined
      },
      tableData: [],
      postForm: {},
      dialogFormVisible: false,
      rules: {
        domainId: [
          { required: true, message: '系统域不能为空', trigger: 'blur' }
        ],
        dictName: [
          { required: true, message: '字典名称不能为空', trigger: 'blur' }
        ],
        dictCode: [
          { required: true, message: '字典编码不能为空', trigger: 'blur' }
        ],
        sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }]
      },
      crruentRow: {},
      slaveTableData: [],
      slavePostForm: {},
      slaveDialogFormVisible: false,
      slaveRules: {
        domainId: [
          { required: true, message: '系统域不能为空', trigger: 'blur' }
        ],
        dataName: [
          { required: true, message: '字典项名称不能为空', trigger: 'blur' }
        ],
        dataValue: [
          { required: true, message: '字典值不能为空', trigger: 'blur' }
        ],
        sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      },
      tableHeight: 600
    }
  },
  created () {
    this.getList()
    this.tableHeight = window.innerHeight - 180
  },
  methods: {
    handleFilter () {
      this.getList()
    },
    domainSelectChange () {
      this.getList()
    },
    getList () {
      const me = this
      me.tableData = []
      me.slaveTableData = []
      dictTypeAPI.list(me.listQuery).then(response => {
        me.tableData = response.data
        if (me.tableData && me.tableData.length > 0) {
          me.crruentRow = me.tableData[0]
          me.getSlaveList(me.tableData[0].dictId)
        }
      })
    },
    getSlaveList (dictId) {
      dictDataAPI.list({ dictId: dictId }).then(response => {
        this.slaveTableData = response.data
      })
    },
    rowClickHandle (row, column, event) {
      this.crruentRow = row
      this.getSlaveList(row.dictId)
    },
    handleCreate () {
      this.postForm = Object.assign(
        {},
        { domainId: this.listQuery.domainId, sort: 1 }
      )
      this.dialogFormVisible = true
    },
    slaveHandleCreate () {
      this.slavePostForm = Object.assign(
        {},
        {
          domainId: this.crruentRow.domainId,
          sort: 1,
          status: 1,
          dictId: this.crruentRow.dictId
        }
      )
      this.slaveDialogFormVisible = true
    },
    handleEdit (index, row) {
      this.postForm = Object.assign({}, {})
      const id = row.dictId
      dictTypeAPI.detail({ id }).then(
        response => {
          this.postForm = response.data
          this.dialogFormVisible = true
        },
        err => {
          console.log(err)
        }
      )
    },
    slaveHandleEdit (index, row) {
      this.slavePostForm = Object.assign({}, {})
      const id = row.dataId
      dictDataAPI.detail({ id }).then(
        response => {
          this.slavePostForm = response.data
          this.slaveDialogFormVisible = true
        },
        err => {
          console.log(err)
        }
      )
    },
    slaveHandleDelete (row) {
      const me = this
      const id = row.dataId
      dictDataAPI.delete({ id }).then(
        res => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          me.getSlaveList(me.crruentRow.dictId)
        },
        err => {
          this.$notify({
            title: '失败',
            message: '删除失败',
            type: 'error',
            duration: 2000
          })
          console.log(err)
        }
      )
    },
    intiDictCache () {
      dictTypeAPI.intiDictCache({}).then(response => {
        this.$notify({
          title: '成功',
          message: '初始化成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const postData = Object.assign({}, this.postForm)
          if (postData.dictId) {
            dictTypeAPI.update(postData).then(
              res => {
                this.$notify({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
                this.dialogFormVisible = false
                this.getList()
              },
              err => {
                this.$notify({
                  title: '失败',
                  message: '修改失败',
                  type: 'error',
                  duration: 2000
                })
                console.log(err)
              }
            )
          } else {
            dictTypeAPI.create(postData).then(
              res => {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
                this.dialogFormVisible = false
                this.getList()
              },
              err => {
                this.$notify({
                  title: '失败',
                  message: '创建失败',
                  type: 'error',
                  duration: 2000
                })
                console.log(err)
              }
            )
          }
        }
      })
    },
    slaveSubmitForm () {
      this.$refs.slaveForm.validate(valid => {
        if (valid) {
          const postData = Object.assign({}, this.slavePostForm)
          if (postData.dataId) {
            dictDataAPI.update(postData).then(
              res => {
                this.$notify({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
                this.slaveDialogFormVisible = false
                this.getSlaveList(this.crruentRow.dictId)
              },
              err => {
                this.$notify({
                  title: '失败',
                  message: '修改失败',
                  type: 'error',
                  duration: 2000
                })
                console.log(err)
              }
            )
          } else {
            dictDataAPI.create(postData).then(
              res => {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
                this.slaveDialogFormVisible = false
                this.getSlaveList(this.crruentRow.dictId)
              },
              err => {
                this.$notify({
                  title: '失败',
                  message: '创建失败',
                  type: 'error',
                  duration: 2000
                })
                console.log(err)
              }
            )
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dict-data {
  padding-bottom: 15px;
  .filter-item {
    margin-right: 10px;
  }
}
:deep(.el-table__cell) {
  .el-button {
    margin-right: 6px;
    &:last-child {
      margin-right: 0;
    }
  }
}
:deep(.mini-el-dialog) {
  background: rgba(0, 0, 0, 0.5);
  .el-dialog {
    margin-top: 3vh !important;
    margin-bottom: 0 !important;
  }
}
</style>
